<template>
	<n-config-provider :theme="store.state.themeMode == 'dark' ? darkTheme : null"
	                   :theme-overrides="themeOverrides"
	                   :locale="zhCN"
	                   :date-locale="dateZhCN">
		<n-loading-bar-provider>
			<!--<n-theme-editor>-->
				<n-message-provider>
					<n-dialog-provider>
						<router-view />
					</n-dialog-provider>
				</n-message-provider>
			<!--</n-theme-editor>-->
		</n-loading-bar-provider>
	</n-config-provider>
</template>

<script lang="ts" setup>
import {NConfigProvider, GlobalThemeOverrides, NThemeEditor, zhCN, dateZhCN, darkTheme} from "naive-ui"
import {useStore} from "vuex"
import {ref} from "vue"

const store = useStore()

const initTheme = () => {
	store.commit("setThemeMode", localStorage.getItem("themeMode") || "light")
	store.commit("setThemeColor", localStorage.getItem("themeColor") || "#409EFF")
}
initTheme()

const themeOverrides = ref<GlobalThemeOverrides>({})

const getThemeOverrides = () => {
// 自定义主题
	themeOverrides.value = {
		common: {
			primaryColor: store.state.themeColor,
			primaryColorHover: store.state.themeColor + "cc",
			primaryColorPressed: store.state.themeColor + "cc",
			errorColor: "#F56C6C",
			errorColorHover: "#f89898",
			errorColorPressed: "#f89898",
		},
	}
}
getThemeOverrides()

store.watch(() => store.state.themeColor, () => {
	getThemeOverrides()
})

</script>

<style lang="scss">
* {
	margin: 0;
	padding: 0;
}
</style>
